<template>
  <view>

    <view class="cardItem animated slideInLeft" v-for="(job,jobIndex) in jobList" :key="jobIndex" @tap="jobDetail" v-bind:style="'animation-delay:'+jobIndex*80+'ms'">
      <view class="title mdTitle Han">
        {{job.name}}
      </view>
      <view class="msg Han mdText">
        <text>{{job.address}}</text>
        <text v-if="job.isList">已上市</text>
        <text>{{job.numRange}}人</text>
      </view>

      <view class="tags mdText Han">
        <view class="tag" v-for="tag in job.tag">
          {{tag}}
        </view>
      </view>

      <view class="hr">
        <image :src="job.photo" mode=""></image>
        <text class="md2Text">{{job.unit}}</text>
      </view>

      <text class="salary mdTitle Han" style="color: yellow;">
        {{job.salary}}K
      </text>

      <!-- 分割线 -->
      <!-- <view class="line">
				
			</view> -->

      <!-- 时间 -->
      <view class="editLine">
        <text class="Han md2Text">{{time}}</text>
        <!-- <button type="default" class="cancel md6Text" @click="cancelCollect(job,jobIndex)">取消收藏</button> -->
      </view>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      time: "2021年12月01日 12：32",
      jobList: [
        {
          name: "高级UI设计师",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "12-16",
          position: "上海黄埔",
          photo: require("../../../static/imgs/hr1.gif"),
          hr: "高女士·人事主管",
          unit: "威斯特信息科技有限公司",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },
        {
          name: "礼品包装/平面设计",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "8-9",
          position: "上海黄埔",
          photo: require("../../../static/imgs/hr2.png"),
          hr: "吴女士·hr",
          unit: "威斯特信息科技有限公司",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },

        {
          name: "高级UI设计师",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "12-16",
          position: "上海黄埔",
          photo: require("../../../static/imgs/hr1.gif"),
          hr: "高女士·人事主管",
          unit: "威斯特信息科技有限公司",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },
        {
          name: "礼品包装/平面设计",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "8-9",
          position: "上海黄埔",
          unit: "威斯特信息科技有限公司",
          photo: require("../../../static/imgs/hr2.png"),
          hr: "吴女士·hr",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },

        {
          name: "高级UI设计师",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "12-16",
          position: "上海黄埔",
          unit: "威斯特信息科技有限公司",
          photo: require("../../../static/imgs/hr1.gif"),
          hr: "高女士·人事主管",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },

        {
          name: "礼品包装/平面设计",
          address: "安徽广雅",
          isList: true,
          numRange: "50-100",
          salary: "8-9",
          position: "上海黄埔",
          unit: "威斯特信息科技有限公司",
          photo: require("../../../static/imgs/hr2.png"),
          hr: "吴女士·hr",
          tag: ["视觉设计", "学历不限", "经验不限", "交互体验"],
        },
      ],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  methods: {
    // 取消收藏
    cancelCollect(item, index) {
      this.jobList.splice(index, 1);
      uni.showToast({
        title: "取消成功",
        duration: 2000,
      });
    },

    jobDetail() {
      uni.navigateTo({
        url: "/pages/views/detail/index",
      });
    },
  },
};
</script>

<style scoped lang="less">
.cardItem {
  width: 100%;
  // height: 370upx;
  background-color: #fff;
  margin: 10upx auto;
  padding: 0 32upx;
  position: relative;
  padding-bottom: 18upx;

  .title {
    color: #333;
    font-weight: normal;
    padding-top: 28upx;
  }

  .msg {
    padding-top: 20upx;
    color: #999999;

    text {
      padding-right: 30upx;
    }
  }

  .tags {
    display: flex;
    margin-top: 24upx;
    .tag {
      // width: 104upx;
      padding: 0 10upx;
      height: 42upx;
      line-height: 42upx;
      text-align: center;
      background-color: #f3faff;
      margin-right: 20upx;
    }
  }

  .hr {
    margin-top: 18upx;
    image {
      width: 72upx;
      height: 72upx;
      vertical-align: middle;
      margin-right: 10upx;
    }
  }

  .salary {
    position: absolute;
    color: #00aaef;
    top: 28upx;
    right: 36upx;
  }

  .editLine {
    display: flex;
    justify-content: space-between;
    padding-top: 14upx;
    text {
      color: #999999;
    }

    .cancel {
      height: 52upx;
      line-height: 52upx;
      margin: 0;
      background-color: #f5f5f5;
    }
  }
}

.salary {
  color: #00aaef !important;
}
</style>
